<template>
  <div class="carousel">
    <el-carousel :autoplay="false" trigger="click" height="540px">
      <el-carousel-item v-for="(imgUrl,index) in imgUrls" :key="index" >
        <center> <img :src="imgUrl" style="height:540px"> </center>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
  export default { 
    data() {
      return {
        imgUrls: []
      };
    },
    created() {
      this.$http.get('/json/HomeCarousel.json').then((response) => {
        console.log(response);
        this.imgUrls = response.data.imgUrls;
        console.log(this.imgUrls);
      });
    }
  };

</script>

<style lang="less" scoped>

.carousel{margin: 10px 10px;}

</style>
